<!-- 子菜单 -->
<template>
  <a-sub-menu :key="menuInfo.paths.value">
    <template #icon>
      <span class="anticon iconBg"> <i :class="['iconfont', menuInfo.meta.value.resIconKind]"></i></span>
    </template>
    <template #title>
      <span>{{ menuInfo.meta.value.resName }}</span>
    </template>

    <div v-for="item in menuInfo?.children.value" v-if="menuInfo.children">
      <template v-if="item.meta.resType != 'button'">
        <a-menu-item v-if="!item.children" :key="item.paths" @click="clickMenuTitle(item)">

          <a-tooltip placement="right">
            <template #title>
              <span>{{ item.meta.resName }}</span>
            </template>

            <span class="anticon iconBg"> <i :class="['iconfont', item.meta.resIconKind]"></i></span>
            <span>{{ item.meta.resName }}</span>
          </a-tooltip>


        </a-menu-item>
        <menuItem :key="item.path" :menu-info="item" v-else>
        </menuItem>
      </template>
    </div>

  </a-sub-menu>
</template>
<script setup lang="ts">
import { defineProps, toRefs } from 'vue';
import { useRoute } from 'vue-router'


type menuType = {
  path: string,
  paths: string,
  name: string,
  redirect: string,
  meta: {
    resName: string,
    resCheckIcon: string,
    resRange: string,
    resIconKind: string,
    resType: string,
    resIcon: string,
  },
  children?: menuType[],

}

const props = defineProps<{
  menuInfo: menuType,
}>()
const menuInfo = toRefs(props.menuInfo)


const route = useRoute();

function clickMenuTitle(item: menuType) {

  //不跳转当前路由
  console.info(route)
  if (route.path == item.path) {

    return;
  }


}

</script>
<style lang="scss" scoped>
// .iconBg {
//   display: inline-block;
//   width: 30px;
//   height: 30px;
//   border-radius: 4px;
//   background-color: rgba(230, 244, 255, 1);
//   text-align: center;
//   line-height: 26px;
//   margin-right: 10px;
// }

.quan {
  font-size: 16px;
  margin-right: 10px;
  font-weight: 600;
}
</style>